<template>
  <div class="cashier" v-if="JSON.stringify(state.order_info) !== '{}'">
    <van-nav-bar class="header" color="#333" title="支付成功">
      <template #right>
        <van-icon @click="goHomeCancel" color="#333" name="wap-home-o" />
      </template>
    </van-nav-bar>
    <div class="contentWapper">
      <div class="top d-flex align-items-center justify-content-center">
        <div style="text-align: center;">
          <van-icon name="checked" class="icon" />
          <div class="text">支付成功</div>
        </div>
      </div>
      <div class="middle">
        <div class="hotelInfo">
          <p>{{ state.order_info.depart_place }}</p>
          <p>{{ state.order_info.arrive_place }}</p>
          <p>
            {{
              state.order_info.car_type == "1"
                ? "经济型 "
                : state.order_info.car_type == "2"
                ? "舒适型 "
                : state.order_info.car_type == "3"
                ? "豪华型 "
                : state.order_info.car_type == "4"
                ? "商务车"
                : state.order_info.car_type == "5"
                ? "大巴（20人以下）"
                : state.order_info.car_type == "6"
                ? "大巴（20人以上）"
                : state.order_info.car_type == " 7"
                ? "出租车"
                : ""
            }}
          </p>
          <p>{{ state.order_info.depart_time }}用车</p>
        </div>
      </div>
    </div>
    <div class="pay" @click="goDetails">
      查看订单
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, getCurrentInstance } from "vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

const state = reactive({
  order_info: {}
});

onMounted(() => {
  getCarOrderDetails();
});

// 订单信息
const getCarOrderDetails = async () => {
  const url = "/security/car/queryOrderDetail";
  const data = {
    order_id: route.query.order_id, // 订单ID
    member_id: localStorage.memberId
  };
  proxy.$axiosJson(url, data).then(res => {
    if (res.ret_code === "10000") {
      state.order_info = res.data;
    }
  });
};

const goHomeCancel = () => {
  router.push({
    path: "/"
  });
};

// 跳转订单详情
const goDetails = () => {
  router.push({
    path: "/CarOrderDetail",
    query: {
      id: route.query.order_id
    }
  });
};
</script>

<style scoped lang="less">
.cashier {
  :deep(.van-nav-bar-title) {
    font-weight: 600;
  }
  .contentWapper {
    min-height: 100vh;
    background: #f6f7f9;
    .top {
      height: 128px;
      background: #ffffff;
      font-size: 14px;
      font-weight: 400;
      line-height: 14px;
      height: 123px;
      .icon {
        color: #60ca5d;
        font-size: 35px;
        margin-bottom: 10px;
      }
      .text {
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        line-height: 14px;
      }
    }
    .middle {
      width: calc(100% - 30px);
      position: absolute;
      top: 180px;
      left: 50%;
      transform: translateX(-50%);
    }
    .hotelInfo {
      margin: 0 15px;
      margin-top: 10px;
      padding: 0 10px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 3px -2px rgba(230, 234, 238, 1);
      border-radius: 7px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      padding: 25px 20px 25px 30px;
      line-height: 26px;
      .title {
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        line-height: 14px;
        padding-bottom: 10px;
      }
      .info {
        font-weight: 500;
        color: #999999;
        font-size: 14px;
        line-height: 14px;
        padding-bottom: 10px;
      }
      .text {
        padding-bottom: 10px;
      }
    }
  }
  .pay {
    position: absolute;
    bottom: 30px;
    left: 15px;
    width: calc(100% - 30px);
    background: rgba(254, 143, 0, 1);
    border-radius: 7px;
    height: 49px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    line-height: 49px;
    text-align: center;
  }
}
</style>
